<!DOCTYPE html>
<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			.col {
				width: 20px;
				height: 20px;
				background-color: pink;
				/* float: left; */
				/* margin-top: -22px; */
			}
		</style>
	</head>
	<body>
		<div id="app">
			<button @click="start">开始</button>
			<br>
			<i v-for="x in row">
				<button class="col" @click="click_col($event)" v-for="y in col" :x="x" :y="y" boom="false"></button>
				<br>
			</i>
		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					boom: 0,
					row: 0,
					col: 0,
					x: 0,
					y: 0,
					boomP:[],
				},
				methods: {
					start: function() {
						this.row = 9;
						this.col = 9;
						this.boom = 10;
					},
					random: function() {
						// 随机生成雷
						while (this.boom) {
							var num1 = Math.floor(Math.random() * 10 + 1);
							var num2 = Math.floor(Math.random() * 10 + 1);
							
						}
					},
					click_col: function(e) {
						console.log("x", e.target.getAttribute("x"))
						console.log("y", e.target.getAttribute("y"))
						var x = e.target.getAttribute("x")
						var y = e.target.getAttribute("y")
						

					}
				}

			})
		</script>
	</body>
</html>
